<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>


<script>

    var canvas = d3.select("body")
                  .append("svg")
                  .attr("width",500)
                  .attr("height",500);

    var circle1 = canvas.append("circle")
                         .attr("cx",50)
                         .attr("cy",120)
                         .attr("r",20);

    circle1.transition()
            .duration(3000)
            .attr("cx",200)
            .delay(2000)
            .transition()
            .duration(3000)
            .attr("cx",400)
            .each("start",function () { d3.select(this).attr("fill","blue");}  )
            .transition()
            .duration(3000)
            .attr("cy",400)
            .each("start",function () { d3.select(this).attr("fill","red");}  )

</script>

</body>
</html>